* {
    padding: 0;
    margin: 0;
}

body,
html {
    padding-bottom: 50px;
}

//版心
.container {
    width: 1200px;
    margin: auto;
    // background-color: pink;
}

//清除浮动
.clearfix::after {
    display: block;
    content: '';
    clear: both;
    height: 0;
}

.clearfix {
    zoom: 1;
}

//去除li样式
ul li {
    list-style: none;
}

//顶部
header {
    margin-top: 60px;
    margin-bottom: 30px;

    //头部log
    .top {
        .leftlog {
            float: left;
            width: 350px;

            span {
                display: block;
                width: 100px;
                height: 100px;
                border-radius: 10px;
                font-size: 70px;
                background-color: rgb(255, 216, 0);
                color: rgb(56, 25, 10);
                text-align: center;
                line-height: 100px;
                float: left;
                margin-right: 20px;
            }

            h5 {
                font-size: 38px;
                font-family: '楷体';
                margin-top: 20px;
            }
        }

        //头部搜索
        .sousuo {
            float: left;
            width: 626px;
            margin: 25px auto;
            position: relative;

            input {
                width: 586px;
                height: 44px;
                border-radius: 66px;
                padding-left: 40px;
            }

            span {
                position: absolute;
                top: 14px;
                left: 14px;
                z-index: 100;
                font-size: 22px;
            }

            div {
                position: absolute;
                top: 1px;
                right: -2px;
                width: 155px;
                height: 45px;
                border: 0px;
                background-color: rgb(254, 228, 78);
                border-radius: 55px;
                text-align: center;
                line-height: 44px;
                cursor: pointer;
            }

        }

        //右侧图标
        .rightnav {
            float: left;
            margin-left: 20px;
            margin-top: 25px;

            ul {
                float: right;

                li {
                    float: left;
                    list-style: none;
                    margin-left: 10px;
                    text-align: center;

                    span {
                        font-size: 30px;
                        border: 0;
                        color: rgb(255, 116, 116);
                    }

                    div {
                        font-size: 10px;
                    }
                }
            }


        }
    }
}

//内容
main {
    // background-color: rgb(176, 172, 172);
    margin-top: 40px;

    //导航
    .nav {
        width: 100%;
        max-width: 1800px;
        background-color: rgb(67, 36, 12);
        margin: auto;

        ul {
            float: left;

            li {
                float: left;
                width: 280px;
                height: 60px;
                z-index: 1;
                line-height: 60px;
                color: rgb(255, 255, 255);
                font-size: 20px;
                text-align: center;

                &:hover {
                    background-color: rgb(254, 228, 78);
                }

                cursor: pointer;
            }

            .firstli {
                background-color: rgb(254, 228, 78);
            }


        }
    }

    //购物车
    table { 
      
        margin-bottom: 500px;
        background-color: #fff;
        text-align: center;
        border-collapse: collapse;
        margin: auto;
        .firsttr{
            width: 1200px;
            height: 50px;
            border-top: transparent !important ;
        }
        tr{
            margin: auto;
            width: 1200px;
            border-top: 1px solid rgb(77, 76, 76) !important;
            height: 150px;
            // backdrop-filter: blur(1px);
            box-shadow: 0px 3px  rgb(168, 166, 166);
            th:nth-child(1),
            td:nth-child(1) {
                width: 100px;
            }

            th:nth-child(2),
            td:nth-child(2) {
                width: 400px;

                span {
                    display: block;
                    width: 200px;
                    white-space: nowrap;
                    /*2.溢出部分隐藏起来*/
                    overflow: hidden;
                    /*3.文字溢出的时候用省略号来显示*/
                    text-overflow: ellipsis;
                   
                    line-height: 100px;
                }

                img {
                    width: 100px;
                    height: 100px;
                    vertical-align: middle;
                    float: left;
                    margin-right: 20px;
                }
            }

            th:nth-child(3),
            td:nth-child(3) {
                width: 150px;
            }

            th:nth-child(4),
            td:nth-child(4) {
                width: 200px;

                button {
                    width: 30px;
                }

                input {
                    width: 30px;
                    text-align: center;
                }
            }

            td:nth-child(5) {
                width: 150px;
                color: rgb(251, 111, 0);
            }

            th:nth-child(6),
            td:nth-child(6) {
                width: 150px;

                div {
                    width: 30px;
                    height: 30px;
                    border-radius: 50%;
                    text-align: center;
                    margin: auto;
                    line-height: 30px;
                    cursor: pointer;

                    &:hover {
                        background-color: red;
                    }
                }
            }

        }

        

    }
}

footer {
    width: 100%;
    max-width: 1800px;
    position: fixed;

    bottom: 0px;
    background-color: rgb(225, 221, 221);

    ul {

        width: 1200px;

        margin: auto;

        li:nth-child(1),
        li:nth-child(2) {
            float: left;

            margin: 20px;

            span {
                color: rgb(251, 111, 0);
            }
        }

        li:nth-child(3),
        li:nth-child(4) {
            float: right;
            margin: 20px;

            span {
                color: rgb(251, 111, 0);
                font-size: 30px;
            }

            div {
                width: 150px;
                height: 50px;
                background-color: rgb(242, 88, 7);
                text-align: center;
                line-height: 50px;
                color: #fff;
                cursor: pointer;
            }
        }
    }
}